import React, { useEffect, useState } from "react";
import "./Step3.css";
import Index from "../../../components/bg";
import { useNavigate } from "react-router";

const Step3 = () => {
  const [formData, setFormData] = useState(() => {
    const savedData = localStorage.getItem("registerStep3");
    return savedData
      ? JSON.parse(savedData)
      : {
          companyName: "",
          teamSize: "21-40",
        };
  });

  const teamSizes = [
    "只有我",
    "2-5",
    "6-10",
    "11-20",
    "21-40",
    "41-50",
    "51-100",
    "101-500",
  ];

  const navigate = useNavigate();

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleTeamSizeClick = (size) => {
    setFormData((prev) => ({
      ...prev,
      teamSize: size,
    }));
  };

  const handleNavigation = (direction) => {
    if (direction === "prev") {
      navigate("/step2");
    } else if (direction === "next") {
      navigate("/step4");
    }
  };

  useEffect(() => {
    localStorage.setItem("registerStep3", JSON.stringify(formData));
  }, [formData]);

  return (
    <div className="register-container">
      <Index />
      <div className="register-header">
        <span className="step-text">STEP 3/4</span>
        <h4>关于你的公司</h4>
        <div className="form-group">
          <label>你的公司名字</label>
          <input
            type="text"
            name="companyName"
            placeholder="有料素材"
            value={formData.companyName}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <label>你的团队有多少人？</label>
          <div className="team-size-grid">
            {teamSizes.map((size) => (
              <button
                key={size}
                className={`team-size-btn ${
                  formData.teamSize === size ? "active" : ""
                }`}
                onClick={() => handleTeamSizeClick(size)}
                type="button"
              >
                {size}
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="button-group">
        <button className="btn-prev" onClick={() => handleNavigation("prev")}>
          ← 上一步
        </button>
        <button className="btn-next" onClick={() => handleNavigation("next")}>
          下一步 →
        </button>
      </div>
    </div>
  );
};

export default Step3;
